import { React, useEffect, useState } from 'react'
import '../views/register.css'
import { DownOutline } from 'antd-mobile-icons'
import { Picker, Button, Toast } from 'antd-mobile'
import { useNavigate, useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { register } from '../request/api'
import {langData} from "@/utils/utils";


export default function Register() {
    let navigate = useNavigate();
    const location = useLocation();
    const { t, i18n } = useTranslation();
    const [areaNum, setAreaNum] = useState(1)
    const [visible, setVisible] = useState(false)//选择器显示
    const [input1Value, setInput1Value] = useState('');
    const [input2Value, setInput2Value] = useState('');
    const [input3Value, setInput3Value] = useState('');
    const [input4Value, setInput4Value] = useState('');
    const [input5Value, setInput5Value] = useState(new URLSearchParams(location.search).get('invite'));
    const [input6Value, setInput6Value] = useState('');
    useEffect(() => {
        if (location.state != null) {
            setAreaNum(location.state)
        } else {
            setAreaNum(1)
        }
    }, [])
    const [list1, setlist1] = useState(langData)
    const submit = () => {
        Toast.show({
            icon: 'loading',
            content: t('t4'),
        })
        if (!input1Value  || !input2Value || !input3Value || !input4Value || !input5Value || !input6Value ) {
            Toast.clear()
            Toast.show({
                icon: 'fail',
                content: t('t3'),
            })
            return false
        }
        if (input3Value != input4Value) {
            Toast.clear()
            Toast.show({
                icon: 'fail',
                content: t('t19'),
            })
            return false
        } else if (input3Value.length < 6 || input4Value.length < 6) {
            Toast.clear()
            Toast.show({
                icon: 'fail',
                content: t('t22'),
            })
            return false
        }
        register({
            username: input2Value,
            phone: `${areaNum}${input1Value}`,
            qh: areaNum,
            pwd: input3Value,
            re_pwd: input4Value,
            invite_code: input5Value,
            email: input6Value,
            deposit_pwd: 123456
        }).then(res => {
            if (res.code == 0) {
                Toast.show({
                    icon: 'success',
                    content: res.info,
                })
                navigate('/Login')
            } else {
                Toast.show({
                    icon: 'fail',
                    content: res.info,
                })
            }
        })
    }
    return (
        <div className='Register'>
            <div className='lang' onClick={() => { setVisible(true) }}>
                <p>{t('l1')}</p>
            </div>
            <div className='from_Register'>
                <div className='logo'>
                    <img src="./assets/index/logo.svg" alt="" />
                </div>
                <div className='Register_from'>
                    <div className='input_from'>
                        <div className='area_code' onClick={() => {
                            navigate('/Area', {state: 2})
                        }}>
                            <p> + {areaNum}</p>
                            <DownOutline/>
                        </div>
                        <input className='account' type="number" onChange={(e) => setInput1Value(e.target.value)}
                               placeholder={t('l8')}/>
                    </div>
                    <div className='input_from'>
                        <input className='account' type="text" onChange={(e) => setInput2Value(e.target.value)}
                               placeholder={t('l9')}/>
                    </div>
                    <div className='input_from'>
                        <input className='password' type="password" onChange={(e) => setInput3Value(e.target.value)}
                               placeholder={t('l16')}/>
                    </div>
                    <div className='input_from'>
                        <input className='password' type="password" onChange={(e) => setInput4Value(e.target.value)}
                               placeholder={t('l11')}/>
                    </div>
                    <div className='input_from'>
                        <input className='password' type="text" value={input6Value || ''}
                               onChange={(e) => setInput6Value(e.target.value)} placeholder={t('l17')}/>
                    </div>
                    <div className='input_from'>
                        <input className='password' type="text" value={input5Value || ''}
                               onChange={(e) => setInput5Value(e.target.value)} placeholder={t('l12')}/>
                    </div>
                    <div className='Register_submit'>
                        <Button block color='' onClick={() => {
                            submit()
                        }}>
                            {t('l13')}
                        </Button>
                    </div>
                    <div style={{height: '15px'}}>

                    </div>
                    <div className='Register_text'>
                        <p>{t('l14')}?</p><p onClick={() => {
                        navigate('/Login')
                    }}>{t('l15')}</p>
                    </div>
                </div>
            </div>
            <Picker
                columns={list1}
                defaultValue={[localStorage.getItem('lang') || 'en']}
                cancelText={t('ty2')}
                confirmText={t('ty1')}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                onConfirm={v => {
                    i18n.changeLanguage(v[0])
                    localStorage.setItem('lang', v[0])
                }}
            />
        </div>
    )
}
